<template>
  <div id='tmpl'>
      <div class="desc">
          <div class="title">
            <h4>{{info.title}}</h4>
            <p>{{info.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} {{info.click}}次浏览</p>
            <p class="line"></p>
          </div>
          <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index)  in list" :key="index" >		        	
                <img class="preview-img" :src="item.src" @click="$preview.open(index, list)" >
		        </li>
		        </ul>   
		      </div>
          <p v-html="info.content"></p>
      </div>

      <!--评论模块-->
      <comment :id="id"></comment>
  </div>
</template>
<script>

import common from '../../kits/common.js';
import {Toast} from 'mint-ui';
import comment from '../subcom/comment.vue';


export default {
  components:{
    comment,
  },
  data () {
    return {
      id:'',
      info:{},
      list:[],
    };
  },
  created(){
    this.id = this.$route.params.id;
    this.getimginfo(this.id);
    this.getimgs(this.id);
  },
  methods:{
    getimginfo(id){
      var url = common.apidomain + '/api/getimageInfo/'+id;
      this.$http.get(url).then(function (res) {  
          var data = res.body;
          if(data.status!=0){
            Toast(data.message);
            return;
          }
          this.info = data.message[0];
      })
    },
    getimgs(id){
      var url = common.apidomain + '/api/getthumimages/'+id;
      this.$http.get(url).then(function (res) { 
          var data = res.body;
          if(data.status!=0){
            Toast(data.message);
            return;
          }
          data.message.forEach(function(item) {
            var img = document.createElement('img');
            img.src = item.src;
            item.w = img.width;
            item.h = img.height;
          });
          this.list = data.message;
       })
    }
  }
}
</script>
<style lang="css" scoped>
  .desc {
    padding: 10px;
  }
  .desc h4 {
    color:#0094ff;
    font-size: 18px;
  }
  .desc .title p {
    color: rgba(0, 0, 0, .5);
    margin-top: 10px;
  }
  .desc .title .line {
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
  }
  .mui-content ,.mui-content ul {
	  background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
  	border-bottom:none;
	  border-right: none;
  }
  .mui-grid-view.mui-grid-9 {
  	border-left: none;
	  border-top: none;
  }
  .desc img {
    width: 100%;
  }
</style>